<template>
  <view style="overflow: hidden" :style="{height:showSelect==true?'100vh':''}">
    <!-- 楼层装修店铺信息 -->

    <!-- @click.native="search" -->
    <div class="lean-bg">
      <mSearch
        ref="mSearch"
        class="mSearch-input-box"
        @clickLeft="back"
        :mode="2"
        placeholder="请输入关键词"
        :showBorder="false"
      ></mSearch>
    </div>
    <div class="page-box">
      <div class="wrapper" style="margin:0 16rpx 16rpx 16rpx;">
        <!-- 店铺信息模块 -->
        <div class="store flex" style="">
          <u-image
            border-radius="20"
            width="82"
            height="82"
            :src="storeInfo.storeLogo || config.logo"
            mode="aspectFit"
          >
          </u-image>
          <div class="box">
            <div class="store-name wes" @click="getStoreLicencePhoto">
              {{ storeInfo.storeName || "" }}
            </div>
            <div class="store-desc wes">
              {{ storeInfo.storeDesc || "" }}
            </div>

          </div>
          <div class="collection">
            <div class="collection-btn" @click="whetherCollection">
              {{ isCollection ? "已关注" : "+ 关注" }}
            </div>
          </div>
        </div>

      </div>


      <!-- 基础店铺模式 -->
      <div v-if="basePageData">
        <u-tabs
            :list="tabs"
            :active-color="'#009968'"
            :is-scroll="false"
            :current="current"

            :isScroll="true"
            @change="changeTab"
        ></u-tabs>
       <view  style="position: relative;width: 100%;height: 84rpx;background-color: white" >
         <view class="right-icon" @click="showSelect=!showSelect">
           <img  src="/static/select1.png" style="width: 36rpx;height: 36rpx"></img>
         </view>
         <view v-if="showSelect" class="selectShow" >
           <view class="item1"    @click="tabClick(0)">
             <view   :class="filterIndex === 0 ?'titleActive':'title'">综合排序</view>
              <u-icon v-if="filterIndex === 0" name="checkbox-mark" color="#009968" size="34"></u-icon>
           </view>
           <view class="item1"     @click="tabClick(1,'price')">
             <view :class="filterIndex === 1 ?'titleActive':'title'">价格升序</view>
             <u-icon v-if="filterIndex === 1" name="checkbox-mark" color="#009968" size="34"></u-icon>
           </view>
           <view class="item1"     @click="tabClick(2,'price')">
             <view :class="filterIndex === 2 ?'titleActive':'title'">价格降序</view>
             <u-icon v-if="filterIndex === 2" name="checkbox-mark" color="#009968" size="34"></u-icon>
           </view>
         </view>
         <scroll-view scroll-x="true" >
           <view class="second-tabs" >

             <view :class="secondCurrent==index? 'item-active':'item'"   @click="changeTabS(index)" v-for="(item,index) in secondTabs" :key="index">
               {{ item.name }}
             </view>
<!--             <view class="item" v-for="item in 10">-->
<!--               全部11-->
<!--             </view>-->
           </view>
         </scroll-view>
       </view>
        <div class="content" style="position: relative">
          <view v-if="showSelect" style="z-index: 22;width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: rgba(0,0,0,0.6)"></view>
          <u-empty
            style="margin-top: 100rpx"
            v-if="goodsList.length == 0"
            class="empty"
            text="暂无商品信息"
          ></u-empty>
          <goodsTemplate
            style="width: 100%"
            v-else
            :res="goodsList"
            :storeName="false"
          />
        </div>
     </div>
    </div>
  </view>
</template>

<script>
// 引用组件
import tpl_banner from "@/pages/tabbar/home/template/tpl_banner"; //导航栏模块
import tpl_title from "@/pages/tabbar/home/template/tpl_title"; //标题栏模块
import tpl_left_one_right_two from "@/pages/tabbar/home/template/tpl_left_one_right_two"; //左一右二模块
import tpl_left_two_right_one from "@/pages/tabbar/home/template/tpl_left_two_right_one"; //左二右一模块
import tpl_top_one_bottom_two from "@/pages/tabbar/home/template/tpl_top_one_bottom_two"; //上一下二模块
import tpl_top_two_bottom_one from "@/pages/tabbar/home/template/tpl_top_two_bottom_one"; //上二下一模块
import tpl_flex_one from "@/pages/tabbar/home/template/tpl_flex_one"; //单行图片模块
import tpl_flex_two from "@/pages/tabbar/home/template/tpl_flex_two"; //两张横图模块
import tpl_flex_three from "@/pages/tabbar/home/template/tpl_flex_three"; //三列单行图片模块
import tpl_flex_five from "@/pages/tabbar/home/template/tpl_flex_five"; //五列单行图片模块
import tpl_flex_four from "@/pages/tabbar/home/template/tpl_flex_four"; //四列单行图片模块
import tpl_text_picture from "@/pages/tabbar/home/template/tpl_text_picture"; //文字图片模板
import tpl_menu from "@/pages/tabbar/home/template/tpl_menu"; //五列菜单模块
import tpl_search from "@/pages/tabbar/home/template/tpl_search"; //搜索栏
import tpl_group from "@/pages/tabbar/home/template/tpl_group"; //
import tpl_goods from "@/pages/tabbar/home/template/tpl_goods"; //商品分类以及分类中的商品
import goodsTemplate from "@/components/m-goods-list/list";
import mSearch from "@/components/m-search-revision/m-search-revision.vue";
import { getStoreBaseInfo, getStoreCategory } from "@/api/store.js";
import {
  receiveCoupons,
  deleteStoreCollection,
  collectionStore,
  getStoreIsCollect,
} from "@/api/members.js";
import config from "@/config/config";

import { getGoodsList } from "@/api/goods.js";
import { getAllCoupons } from "@/api/promotions.js";
import { getFloorStoreData } from "@/api/home"; //获取楼层装修接口
export default {
  data() {
    return {
      config,
      filterIndex: 0,
      showSelect:false,
      pageData: "", //楼层页面数据
      enablePageData: false, //是否显示楼层装修内容
      basePageData: false, //基础店铺信息
      scrollTop: 0,
      mainColor: this.$mainColor, //主色调
      current: 0, //初始tabs的索引
      secondCurrent: 0, //初始二级tabs的索引
      tabs: [
        {
          name: "推荐",
          id:''
        }
      ], // 标签
      secondTabs:[
        {name: '全部',
        id:''}
      ],
      storeId: "",
      keyword: "",
      storeInfo: {}, //店铺详情
      isCollection: false, //是否关注
      goodsList: [], //推荐货物
      couponList: [], //优惠券列表
      categoryList: [],
      couponParams: {
        pageNumber: 1,
        pageSize: 50,
        storeId: "",
      },
      goodsParams: {
        pageNumber: 1,
        pageSize: 10,
        storeId: "",
      },
      params: {
        pageNumber: 1,
        pageSize: 10,
        storeId: "",
        categoryId:'',
        sort:'showWeight',
        desc:'desc'
        //TODU需要在正式环境处理
      },
    };
  },
  components: {
    carousel: tpl_banner,
    titleLayout: tpl_title,
    leftOneRightTwo: tpl_left_one_right_two,
    leftTwoRightOne: tpl_left_two_right_one,
    topOneBottomTwo: tpl_top_one_bottom_two,
    topTwoBottomOne: tpl_top_two_bottom_one,
    flexThree: tpl_flex_three,
    flexFive: tpl_flex_five,
    flexFour: tpl_flex_four,
    flexTwo: tpl_flex_two,
    textPicture: tpl_text_picture,
    menuLayout: tpl_menu,
    search: tpl_search,
    flexOne: tpl_flex_one,
    goods: tpl_goods,
    group: tpl_group,
    goodsTemplate,
    mSearch,
    // spike: tpl_spike,
    // joinGroup: tpl_join_group,
    // integral: tpl_integral,
  },
  watch: {
    current(val) {
      this.goodsList = [];
      this.params.pageNumber = 1;
      this.getGoodsData();
      // val == 0
      //   ? () => {
      //       this.goodsList = [];
      //       this.getGoodsData();
      //     }
      //   : this.getCategoryData();
    },
  },

  /**
   * 加载
   */
  async onLoad(options) {
    this.storeId = options.id;
    this.goodsParams.storeId = options.id;
    this.params.storeId = options.id;
    this.couponParams.storeId = options.id;
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onPullDownRefresh() {
    this.init();
  },
  mounted() {
    // #ifdef MP-WEIXIN
    // 小程序默认分享
    uni.showShareMenu({
      withShareTicket: true,
    });
    // #endif
    this.init();
  },

  // 下拉加载
  onReachBottom() {
    this.goodsParams.pageNumber++;
    this.params.pageNumber++;
    this.getGoodsData();
  },

  methods: {
    tabClick(index, type) {
      this.params.pageNumber = 1;
      this.params.pageSize = 10;
      this.params.order = "";
      if (this.params.sort == type) {
        // this.params.order == "asc"
        //     ? (this.params.order = "desc")
        //     : (this.params.order = "asc");

        this.$set(this.params, "sort", type);
      } else {
        // this.params.order = "desc";
        this.$set(this.params, "sort", type);
      }

      if (index == 0) {
        this.params.sort = "showWeight";
        // this.params.order = "desc";
      }
      if(index==1){
        this.params.sort = "price";
        this.params.order = "desc";
      }
      if(index==2){
        this.params.sort = "price";
        this.params.order = "asc";
      }
      this.filterIndex = index;

      uni.pageScrollTo({
        duration: 300,
        scrollTop: 0,
      });
      uni.showLoading({
        title: "正在加载",
      });
      // this.loadDataProduct("refresh", 1);
      this.getGoodsData(true);
    },
    search() {
      uni.navigateTo({
        url: "/pages/navigation/search/searchPage",
      });
    },
    talk() {
      this.$options.filters.talkIm(this.storeInfo.storeId);
    },
    back() {
      uni.navigateBack();
    },
    /**
     * 实例化首页数据楼层
     */
    initPageData() {
      this.pageData = "";
      getFloorStoreData({
        pageType: "STORE",
        num: this.storeId,
      }).then((res) => {
        if (res.data.success) {
          this.pageData = JSON.parse(res.data.result.pageData);
        }
      });
    },
    getStoreLicencePhoto() {
      uni.navigateTo({
        url: `/pages/product/licencePhoto?id=${this.storeId}`,
      });
    },
    /**
     * 初始化信息
     */
    init() {
      this.goodsList = [];
      this.categoryList = [];
      this.couponList = [];
      this.goodsParams.pageNumber = 1;
      this.params.pageNumber = 1;
      if (this.$options.filters.isLogin("auth")) {
        this.enableGoodsIsCollect();
      }
      // 店铺信息
      this.getStoreData();
    },
    /**
     * 联系客服
     */
    linkKefuDetail() {
      // 客服
      // #ifdef MP-WEIXIN

      const params = {
        // originalPrice: this.goodsDetail.original || this.goodsDetail.price,
        uuid: storage.getUuid(),
        token: storage.getAccessToken(),
        sign: this.storeInfo.yzfSign,
        mpSign: this.storeInfo.yzfMpSign,
      };
      uni.navigateTo({
        url: "/pages/mine/im/index",
      });
      // uni.navigateTo({
      //   url:
      //     "/pages/product/customerservice/index?params=" +
      //     encodeURIComponent(JSON.stringify(params)),
      // });
      // // #endif
      // // #ifndef MP-WEIXIN
      // const sign = this.storeInfo.yzfSign;
      // uni.navigateTo({
      //   url:
      //     "/pages/tabbar/home/web-view?src=https://yzf.qq.com/xv/web/static/chat/index.html?sign=" +
      //     sign,
      // });
      // #endif
    },

    /** 获取店铺分类 */
    async getCategoryData() {
      let res = await getStoreCategory(this.storeId);
      if (res.data.success) {
        this.categoryList = res.data.result;
        let label = res.data.result.map(item => {

          return {
            id: item.id,
            name: item.labelName,
          }
        })
        this.tabs = [...this.tabs,...label];
        console.log(this.tabs,'this.tabs')
      }
    },
    /**是否收藏店铺 */
    async enableGoodsIsCollect() {
      let res = await getStoreIsCollect("STORE", this.storeId);
      if (res.data.success) {
        this.isCollection = res.data.result;

      }
    },

    /**商品分类中商品集合 */
    getCategoryGoodsList(val) {
      uni.navigateTo({
        url: `/pages/product/shopPageGoods?title=${val.labelName}&id=${val.id}&storeId=${this.storeId}`,
      });
    },

    /**
     * 搜索
     */
    search() {
      uni.navigateTo({
        url: `/pages/navigation/search/searchPage?storeId=${this.storeId}&keyword=${this.keyword}`,
      });
    },

    /** 点击tab */
    changeTab(index) {
      this.current = index;
      this.params.categoryId = this.tabs[index].id
      let sList = this.categoryList[Number(index)-1].children || []
      this.secondCurrent = 0;
      this.secondTabs = [{name: '全部',
        id:''},...sList.map(item => {
          return {
            name: item.labelName,
            id: item.id,
          }
      })]
    },
    /** 点击二级tab */
    changeTabS(index) {
      this.secondCurrent = index;
      if(index == 0) {
        this.params.categoryId = this.tabs[this.current].id
      }else{
        this.params.categoryId = this.secondTabs[index].id
      }
      this.goodsList = [];
      this.params.pageNumber = 1;
      this.getGoodsData();
    },
    /**
     * 店铺信息
     */
    async getStoreData() {
      let res = await getStoreBaseInfo(this.storeId);
      if (res.data.success) {
        this.storeInfo = res.data.result;
        // 优惠券信息
        this.getCouponsData();
        if (res.data.result.pageShow == "1") {
          // 开启了楼层装修店铺
          this.initPageData();
          this.enablePageData = true;
        } else {
          // 商品信息
          this.getGoodsData();
          // 店铺分类
          this.getCategoryData();

          this.basePageData = true;
        }
      } else {
        uni.reLaunch({
          url: "/",
        });
      }
    },

    /** 加载商品 */
    async getGoodsData(reflash = false) {
      if(reflash){
        this.goodsList = []
        this.params.pageNumber =1;
        this.showSelect = false
      }
      // console.log(reflash,'reflashreflashreflashreflash')
      let res = await getGoodsList(this.params);
      if (res.data.success) {
        this.goodsList.push(...res.data.result.records);
      }
    },

    /** 加载优惠券 */
    async getCouponsData() {
      this.couponParams.storeId = this.storeId;
      let res = await getAllCoupons(this.couponParams);
      if (res.data.success) {
        this.couponList.push(...res.data.result.records);
      }
    },

    /**
     *  是否收藏
     */
    whetherCollection() {
      if (this.isCollection) {
        deleteStoreCollection(this.storeId).then((res) => {
          if (res.data.success) {
            this.isCollection = false;
            uni.showToast({
              icon: "none",
              duration: 3000,
              title: "取消关注成功！",
            });
          }
        });
      } else {
        collectionStore(this.storeId).then((res) => {
          if (res.data.success) {
            this.isCollection = true;
            uni.showToast({
              icon: "none",
              duration: 3000,
              title: "关注成功！",
            });
          }
        });
      }
    },

    /**
     * 领取
     */
    getCoupon(item) {
      if (!this.$options.filters.isLogin("auth")) {
        uni.showToast({
          icon: "none",
          duration: 3000,
          title: "请先登录！",
        });

        this.$options.filters.navigateToLogin("redirectTo");
        return false;
      }
      receiveCoupons(item.id).then((res) => {
        if (res.data.success) {
          uni.showToast({
            icon: "none",
            duration: 3000,
            title: "领取成功！",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-box {
  //padding: 16rpx;
  background: #fafafa;
}
.wrapper {
  background: #fff;
  padding: 24rpx;
  border-radius: 16rpx;
  height: 130rpx;
  box-sizing: border-box;
  margin-bottom: 16rpx;
}

.store {
  align-items: center;

  > .box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 16rpx;
    font-size: 24rpx;
    color: #757575;
    flex: 2;

    > .store-name {
      font-size: 32rpx;
      color: #212121;
      font-weight: 500;
      max-width: 420rpx;
    }

    > .store-message {
      margin-top: 25rpx;

      > div {
        font-size: 26rpx;
        margin: 0 5rpx;

        > span {
          font-size: 26rpx;
          font-weight: bold;
          color: #333;
          margin-right: 8rpx;
        }
      }
    }
  }
}

.collection-btn {
  background: #00e69c;
  height: 50rpx;
  line-height: 50rpx;
  width: 108rpx;
  font-size: 24rpx;
  color: #212121;
  border-radius: 12rpx;
  text-align: center;
}

.store-desc {
  margin: 12rpx 0 0 0;
  color: #999;
  max-width: 420rpx;
}

.content {
  margin-top: 20rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  > .empty {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40rpx;
  }

  .item {
    overflow: hidden;

    background: #fff;
    width: 49%;
    height: 484rpx;
    font-size: 26rpx;
    display: flex;
    flex-direction: column;
    border: 1px solid #f8f8f8;
    margin-bottom: 20rpx;

    .name {
      text-align: left !important;
      color: #333;
      padding: 0 20rpx;
      margin-top: 20rpx;
      height: 80rpx;
      overflow: hidden;
    }

    .price {
      font-weight: 500;
      color: $main-color;
      font-size: 30rpx;
      padding: 0 20rpx;
      margin-top: 20rpx;
      white-space: nowrap;
    }

    .buyCount {
      display: flex;
      padding: 0 20rpx;
      font-size: 24upx;
      justify-content: space-between;
      color: #999;
    }
  }
}

.discount {
  height: 154rpx;
  border-top: 1px solid #f6f6f6;
  border-bottom: 18rpx solid #f6f6f6;
  background: #f6f6f6;
  overflow: hidden;
  white-space: nowrap;

  .card-box {
    display: inline-block;
    padding-top: 25rpx;
  }

  .card {
    width: 324rpx;
    height: 116rpx;
    background: #fff;
    margin-left: 20rpx;
    border-radius: 5px;
    display: flex;
    align-items: center;

    .money {
      width: 45%;
      color: #fd6466;
      font-weight: 500;
      text-align: center;

      text {
        font-size: 50rpx;
      }
    }

    .xian {
      height: 66rpx;
      border: 1px dashed #f6f6f6;
      position: relative;

      &:before,
      &:after {
        content: "";
        width: 22rpx;
        height: 12rpx;
        position: absolute;
        background: #f6f6f6;
      }

      &:before {
        border-radius: 0 0 22rpx 22rpx;
        top: -30rpx;
        left: -10rpx;
      }

      &:after {
        border-radius: 22rpx 22rpx 0 0;
        bottom: -30rpx;
        left: -10rpx;
      }
    }

    .text {
      flex: 1;
      color: $aider-light-color;
      font-size: 24rpx;
      display: flex;
      flex-direction: column;
      margin-left: 14rpx;

      text:nth-of-type(2) {
        color: #ccc;
      }

      .cur:nth-of-type(1) {
        color: #ccc;
      }
    }
  }
}

.category-item {
  background: #fff;
  padding: 22rpx;
  margin: 20rpx 10rpx;

  > .flex {
    color: #666;
    justify-content: space-between;
  }

  > .child-list {
    display: flex;
    margin: 20rpx 0;
    flex-wrap: wrap;

    > .child {
      justify-content: center;
      margin: 1% 0;
      display: flex;
      width: 48%;
      font-size: 24rpx;
      color: #999;
      margin-right: 1%;
      border: 1rpx solid #ededed;
      box-sizing: border-box;
      height: 70rpx;
      text-align: center;
      line-height: 70rpx;
    }
  }
}

.kefu {
  background: #f7f7f7;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32rpx;
  border-radius: 10rpx;
  font-size: 24rpx;
  color: #999;
}
.mSearch-input-box {
  border: none;
}
.lean-bg {
  width: 100%;
  height: 176rpx;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 230, 147, 0.23) 100%
  );
  padding-top: 100rpx;
  box-sizing: border-box;
}
.right-icon{
  position: absolute;
  right: 0;
  top: 0;
  width: 76rpx;
  height: 82rpx;
  background-color: white;
  display: flex;
  z-index: 88;
  justify-content: center;
  align-items: center;
}
.selectShow{
  width: 100%;background-color: white;position: absolute;top: 84rpx;left: 0;height: 318rpx;
  border-bottom-left-radius:16rpx;
  z-index: 88;
  overflow: hidden;
display: flex;
  flex-direction: column;
  border-bottom-right-radius: 16rpx;
  .item1{
    width: calc(100% - 64rpx);
    margin:  0 32rpx;
    height: 106rpx;
    border-bottom: 1rpx solid #F2F2F2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .titleActive{
      font-size: 28rpx;
      color: #009968;
    }
    .title{
      font-size: 28rpx;
      color: black;
    }
  }
}
.second-tabs{

  position: relative;
  width: auto;
  height: 82rpx;
  //background-color: greenyellow;
  padding: 20rpx 20rpx 20rpx 24rpx;
  font-size: 20rpx;
  display: flex;
  flex-wrap: nowrap;
  .item{
    display: flex;
    align-items: center;
    justify-content: left;
    height: 42rpx;
    width: min-content;
    text-wrap: nowrap;
    margin-right: 12rpx;
    border-radius: 8rpx;
    padding: 0 12rpx;
    color: #757575;
    background-color: #F2F2F2;
  }
  .item-active{
    padding: 0 12rpx;
    width: min-content;
    text-wrap: nowrap;
    color: #009968;
    display: flex;
    align-items: center;
    justify-content: left;
    height: 42rpx;
    margin-right: 12rpx;
    border-radius: 8rpx;
    background-color:#E6FFF7 ;
  }
}
</style>
